
<style>
    legend {
        padding-bottom: 5px;
        font-size: 14px;
        font-weight: 600;
        padding-left: 10px;
        padding-right: 15px;
        padding-top: 12px;
        color: #1e7fc2;
    }

    /*.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {*/
    /*    padding: 4px;*/
    /*    line-height: 1.42857143;*/
    /*    vertical-align: top;*/
    /*    border-top: 1px solid #ddd;*/
    /*}*/
    div ::-webkit-scrollbar {
        /*滚动条整体*/
        width: 4px;
        height: 8px;
        border-radius: 5px;
    }
    div ::-webkit-scrollbar-track {
        /*滚动条轨道*/
        background: #e3e3e3;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb {
        /*滚动条里面的滑块*/
        background: #d1d1d1;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb:hover {
        /*滚动条鼠标事件，鼠标放上去出现的事件*/
        background: #a8a8a8;
    }
    div ::-webkit-scrollbar-corner {
        /*滚动条边角*/
        background: #a8a8a8;
    }
    #fastflow-left-content,#fastflow-center-content{
        height: calc(100vh - 94px)!important;
        overflow: auto;
        overflow-x: hidden;
        padding: 10px 0 10px 10px!important;
        scrollbar-width: thin;
    }
    #fastflow-right-content{
        height: calc(100vh - 94px)!important;
    }
    .main-content{
        padding-right: 15px;
    }
    .content{
        padding-bottom: 0!important;
    }
    .CodeMirror{
        height: 100%;
    }
    .editor-tool{
        margin-right: 1px;
        margin-left: 1px;
    }
    .dd ins,input{
        margin-right: 4px;
    }
</style>

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="row main-content">
        <div class="col-md-3 col-lg-3 col-sm-3">
            <legend>配置</legend>
            <div id="fastflow-left-content">
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-3">{:__('Name')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-name" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-3">{:__('Key')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-key" class="form-control" name="row[key]" type="text" value="{$row.key|htmlentities}">
                    </div>
                </div>
                <legend>自定义参数</legend>
                <div class="form-group"  style="overflow: auto;width: 100%;">
                    <div class="col-xs-12 col-sm-12">
                        <dl class="fieldlist" data-template="configtpl" data-name="row[config]">
                            <dd style="display: inline-flex">
                                <ins class="text-center" style="width:100px;">标题</ins>
                                <ins class="text-center" style="width:100px;">键名</ins>
                                <ins class="text-center" style="width:100px;">值</ins>
                            </dd>
                            <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i>
                                {:__('Append')}</a></dd>
                            <textarea name="row[config]" class="form-control hidden" cols="30"
                                      rows="5">{$row.config|htmlentities}</textarea>
                        </dl>
                        <script id="configtpl" type="text/html">
                            <dd class="form-inline" fieldlist-item="true" style="display: inline-flex">
                                <input class="form-control" style="width:100px;" name="<%=name%>[<%=index%>][title]" type="text" value="<%=row.title%>">
                                <input class="form-control" style="width:100px;" name="<%=name%>[<%=index%>][key]" type="text" value="<%=row.key%>">
                                <input class="form-control" style="width:100px;" name="<%=name%>[<%=index%>][value]" type="text" value="<%=row.value%>">
                                <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                            </dd>
                        </script>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-lg-3 col-sm-3">
            <legend>变量</legend>
            <div class="box box-primary" id="fastflow-center-content">
                <div class="box-body no-padding">
                    <table class="table table-striped">
                        <tbody>
                        <tr>
                            <th>变量</th>
                            <th>解释</th>
                        </tr>
                        <tr>
                            <td>{flowName}</td>
                            <td>流程名称</td>
                        </tr>
                        <tr>
                            <td>{flowDescription}</td>
                            <td>流程描述</td>
                        </tr>
                        <tr>
                            <td>{scope}</td>
                            <td>域</td>
                        </tr>
                        <tr>
                            <td>{scopeName}</td>
                            <td>域名称</td>
                        </tr>
                        <tr>
                            <td>{workerIds}</td>
                            <td>原审批人ID</td>
                        </tr>
                        <tr>
                            <td>{workerNames}</td>
                            <td>原审批人名</td>
                        </tr>
                        <tr>
                            <td>{checkmode}</td>
                            <td>审批模式</td>
                        </tr>
                        <tr>
                            <td>{stepName}</td>
                            <td>步骤名</td>
                        </tr>
                        <tr>
                            <td>{preStepName}</td>
                            <td>上一步骤名</td>
                        </tr>
                        <tr>
                            <td>{bill}</td>
                            <td>单据表名</td>
                        </tr>
                        <tr>
                            <td>{billId}</td>
                            <td>单据id</td>
                        </tr>
                        <tr>
                            <td>{billName}</td>
                            <td>单据注释</td>
                        </tr>
                        <tr>
                            <td>{agency}</td>
                            <td>是否为代理</td>
                        </tr>
                        <tr>
                            <td>{agentIds}</td>
                            <td>代理人ID</td>
                        </tr>
                        <tr>
                            <td>{agentName}</td>
                            <td>代理人名</td>
                        </tr>
                        <tr>
                            <td>{principalIds}</td>
                            <td>被代理人ID</td>
                        </tr>
                        <tr>
                            <td>{principalName}</td>
                            <td>被代理人名</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-6 col-sm-6">
            <legend>
                {:__('Templet')}
                <button type="button" class="btn btn-xs btn-info pull-right btn-preview editor-tool"><i class="fa fa-hand-paper"></i><span class="btn-preview-text">预览</span></button>
                <button type="button" class="btn btn-xs btn-default pull-right btn-linewrapping editor-tool"><i class="fa fa-code" style="margin-right: 4px;"></i>自动换行</button>
                <button type="button" class="btn btn-xs btn-default pull-right btn-linenumbers editor-tool"><i class="fa fa-navicon" style="margin-right: 4px;"></i>显示行号</button>
            </legend>
            <div class="form-group" id="fastflow-right-content" style="margin-bottom: 0;">
                <textarea id="templet" class="form-control" style="display: none" rows="32" name="row[templet]" cols="50">{$row.templet|htmlentities}</textarea>
                <iframe id="preview" class="hidden" style="width: 100%;height: 100%;border: none;"></iframe>
            </div>
        </div>
    </div>



    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-10">
            <div class="pull-right">
                <button class="btn btn-success btn-save">保存</button>
                <button type="submit" class="btn btn-success btn-embossed hidden">{:__('OK')}</button>
            </div>
        </div>
    </div>
</form>
